@import '~@/scss/GlobalVariables';

.wallet-launch-modal {
  .close-container {
    height: 50px;
    text-align: right;
    img {
      cursor: pointer;
      height: 30px;
      margin: 4px;
      &:hover {
        color: $mew-green !important;
        opacity: 0.5;
      }
    }
  }

  .header-container {
    display: flex;

    span {
      color: $dark-blue-2;
      font-weight: 700;
      font-size: 32px;
      line-height: 36px;
      margin-bottom: 20px;
      max-width: 350px;
      width: 100%;
    }
  }
  .modal-container {
    display: flex;
    min-height: 372px;

    .body-txt {
      max-width: 350px;
    }

    .footer-txt {
      color: $dark-blue-12;
      font-weight: 500;
    }

    .btn-container {
      display: flex;
      a {
        margin-right: 5px;
        img {
          height: 36px;
        }
      }
    }

    .left-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
      padding-bottom: 3rem;
      padding-left: 3rem;
      padding-right: 2rem;
    }

    .right-container {
      align-items: flex-end;
      display: flex;
      min-height: 100%;
      img {
        max-width: 388px;
      }
    }
  }
}

@media screen and (max-width: 820px) {
  .wallet-launch-modal {
    .modal-container {
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .body-txt {
        text-align: center;
      }

      .footer-txt {
        text-align: center;
      }

      .btn-container > a {
        img {
          max-width: 100px;
        }
      }

      .left-container {
        align-items: center;
        padding-bottom: 1rem;

        .header-container {
          margin-top: 30px;
          span {
            text-align: center;
            max-width: 400px;
            width: 100%;
          }
        }
      }

      .right-container {
        img {
          max-width: 400px;
        }
      }
    }
  }
}

@media all and (max-width: 374px) {
  .wallet-launch-modal {
    .modal-container {
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .body-txt {
        text-align: center;
        max-width: 250px;
      }

      .btn-container {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        a {
          img {
            margin-bottom: 10px;
          }
        }
      }

      .left-container {
        .header-container {
          span {
            max-width: 250px;
          }
        }
      }

      .right-container {
        img {
          max-width: 250px;
        }
      }
    }
  }
}
